﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Transition.aspx.cs" Inherits="ControlExplorer.C1LightBox.Transition" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1LightBox" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<wijmo:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" >
	<Items>
		<wijmo:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="Abstract1"
			ImageUrl="http://lorempixum.com/120/90/abstract/1" 
			LinkUrl="http://lorempixum.com/600/400/abstract/1" />
		<wijmo:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="Abstract2"
			ImageUrl="http://lorempixum.com/120/90/abstract/2" 
			LinkUrl="http://lorempixum.com/600/400/abstract/2" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="Abstract3"
			ImageUrl="http://lorempixum.com/120/90/abstract/3" 
			LinkUrl="http://lorempixum.com/600/400/abstract/3" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="Abstract4"
			ImageUrl="http://lorempixum.com/120/90/abstract/4" 
			LinkUrl="http://lorempixum.com/600/400/abstract/4" />
	</Items>
</wijmo:C1LightBox>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">

<p>
此示例演示从一个页面到下一个转换时的动画效果。
</p>

<p>
您可以改变的动画风格通过设置具有以下值的<b>的TransAnimation.Animated</b>属性：
</p>

<ul>
<li>None -没有动画</li>
<li>Slide -幻灯片动画。</li>
<li>Fade - 淡出动画。</li>
</ul>


<p>
<b>TransAnimation.Easing</b> 决定缓和风格的动画。
<b>TransAnimation.Duration</b> 决定以动画的时间跨度。
</p>


<p>
对于幻灯片的动画，还可以改变幻灯片的方向通过设置 <b>SlideDirection</b> 属性为"Horizontal" 或 "Vertical". 
</p>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">


<script type="text/javascript">
	$(function () {

		$('.option').change(function () {
			$("#<%=C1LightBox1.ClientID%>").c1lightbox('option', {
				transAnimation: { animated: $('#animation').val() },
				slideDirection: $('#direction').val()
			});
		});


	});
</script>

<div class="demo-options">
<!-- Begin options markup -->
	<label>动画</label><select id="animation" class='option'>
				<option value="fade" selected='true'>淡去</option>
				<option value="slide">幻灯片</option>
				<option value="none">无</option>
			</select>
						
	<label>幻灯片方向</label><select id="direction" class='option'>
				<option value="horizontal" selected='true'>水平</option>
				<option value="vertical">竖直</option>
			</select>
<!-- End options markup -->
</div>

</asp:Content>
